<template>
    <div class="coupon-container">
        <p class="yhuiq-p">优惠券</p>
        <div class="coupon-card" v-for="coupon in couponList" :key="coupon.id">
            <div class="coupon-line1">
                <span class="coupon-value">¥{{ coupon.discount }}元</span>
                <span class="coupon-name">{{ coupon.name }}</span>
            </div>
            <div class="coupon-line2">
                <span>{{ coupon.desc }}</span>
                <span class="coupon-tag">· {{ coupon.tag }}</span>
                <span class="coupon-expiry">有效期：{{ coupon.days }}天</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getHomeData } from '@/api/home'

const couponList = ref([])

onMounted(async () => {
    const response = await getHomeData()
    couponList.value = response.data.couponList
})
</script>

<style scoped>
.coupon-container {
    padding: 12px;
}
.yhuiq-p{
  font-size: 18px;
  padding: 10px;
}
.coupon-card {
    border: 1px solid #ff2f55;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 10px;
    background: white;
}

.coupon-line1 {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.coupon-value {
    color: #ff2f55;
    font-size: 20px;
    font-weight: bold;
    margin-right: 10px;
}

.coupon-name {
    font-size: 18px;
    color: #333;
}

.coupon-line2 {
    font-size: 13px;
    color: #666;
}

.coupon-tag {
    margin: 0 5px;
    font-size: 12px;
}

.coupon-expiry {
    color: #999;
    font-size: 12px;
}
</style>